<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舒波day06</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <article class="body">
    <article class="top">
        <!-- 上图片 -->
        <section class="top_top">
            <div class="img_top">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 下面第一个 -->
            <div class="bg_down1">
                <aside>
                    <h3>24/7 Client Support</h3>
                </aside>
                <aside>
                    <p>This is one of free web- site templates created by TemplateMonster.com team.' This website template is optimized for 1024X768 screen res.</p>
                </aside>
                
                <aside class="a_1">
                    <a href="">REAR MORE</a>
                </aside>
            </div>
            <!-- 下面第二个 -->
            <div class="bg_down2">
                <aside>
                    <h3>Premium Services</h3>
                </aside>
                <aside>
                    <p>achtete beate wtae aicta sunt expic abo. Nemo enim lpsam vupalem quia vlupuas Ssenaa auoaul ugtset totam rem aperiam eaque</p>
                </aside>
                <aside class="a_1 a_2">
                    <a href="">REAR MORE</a>
                </aside>
            </div>
            <!-- 第三个图片 -->
            <div class="bg_down3">
                <aside>
                    <h3>Out Strategy</h3>
                </aside>
                <aside>
                    <p>achtete beate wtae aicta sunt expic abo. Nemo enim lpsam vupalem quia vlupuas Ssenaa auoaul ugtset totam rem aperiam eaque</p>
                </aside>
                <aside class="a_1 a_3">
                    <a href="">REAR MORE</a>
                </aside>
            </div>
        </section>
        <div class="h1_text">
            <h2>Latest News & Events</h2>
        </div>
        
        <section class="top_down">
            <aside class="top_down_aside">
                <div class="top_down_div1"><img src="./images/page1_img1.jpg" alt=""></div>
                <div class="top_down_div2">
                    <h4>Sed ut perspiciatis unde omnis iste natus</h4>
                    <p>Dit voluptatem accusantium doloremque laudantium, totam remaperiam, eaque ipsa quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sedquia consequuntur magni dolores.</p>
                </div>
            </aside>
            <aside class="top_down_aside">
                <div class="top_down_div1"><img src="./images/page1_img2.jpg" alt=""></div>
                <div class="top_down_div2">
                    <h4>At vero eos et accusamus et iusto odio dignissimos
                    </h4>
                    <p>Et harum quidem rerum facilis est et expedita distinctio. Namhy
                        libero tempore, cum soluta nobis est eligendi optio cumque nihil
                        impedit quo minus id quod maxime placeat facere possimus,
                        omnis voluptas assumenda est, omnis dolor repellendus
                        emporibus autem quibusdam et aut officis debitis.
                        </p>
                </div>
            </aside>
        </section>
        <div class="h2_text">
            <h2>Our Services</h2>
        </div>
        <section class="top_down_over">
            <aside class="top_down_over_aside" >
                <div class="top_down_over_div1"><img src="./images/page2_img1.png" alt=""></div>
                <div class="top_down_over_div2">
                    <h4>MANGEMENT</h4>
                    <p>Nemo enim ipsam voluptate vuoluptas aspernaturaut odit aut fugit, sed quia consequuntur magni</p>
                </div>
            </aside>
            <aside class="top_down_over_aside">
                <div class="top_down_over_div1"><img src="./images/page2_img3.png" alt=""></div>
                <div class="top_down_over_div2">
                    <h4>MANGEMENT</h4>
                    <p>Nemo enim ipsam voluptate vuoluptas aspernaturaut odit aut fugit, sed quia consequuntur magni</p>
                </div>
            </aside>
        </section>
    </article>
    <article class="min">
        <section class="min1">
            <img src="./images/icon1.png" alt="">
            <img src="./images/icon2.png" alt="">
            <img src="./images/icon3.png" alt="">
        </section>
        <section class="min2">
            <aside class="min_aside">
                <div>
                    <img src="./images/footer_logo.jpg" alt="">
                    <span>BUSINESS COMPANY</span>
                </div>
                <div>
                    <img src="./images/icon_1.png" alt="">
                    <img src="./images/icon_2.png" alt="">
                    <img src="./images/icon_3.png" alt="">
                </div>
            </aside>
        </section>
    </article>
    <article class="down">
        <section class="down_left">
            <a href="#">HOME</a>
            <a href="#">NEWS</a>
            <a href="#">SERVICES</a>
            <a href="#">PRDOUCTS</a>
            <a href="#">FAQ</a>
            <a href="#">CONTACTS</a>
        </section>
        <section class="down_right">
            <!-- 第一个盒子 -->
            <div class="h2_text_1"><h2>Products</h2></div>
            <aside class="down_right_aside1">
                <div>
                    <aside>
                        <img src="./images/page3_img1.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #1</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p></aside>
                </div>
                <div>
                    <aside>
                        <img src="./images/page3_img2.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #2</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p>
                </div>
                <div>
                    <aside>
                        <img src="./images/page3_img3.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #3</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p>
                </div>
                <div>
                    <aside>
                        <img src="./images/page3_img4.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #4</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p>
                </div>
                <div>
                    <aside>
                        <img src="./images/page3_img5.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #5</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p>
                </div>
                <div>
                    <aside>
                        <img src="./images/page3_img6.jpg" alt="">
                    </aside>
                    <aside><h3>PRODUCT #6</h3></aside>
                    <aside><p>Namhy libero temporem soluta nobis.</p>
                </div>
            </aside>
            <!-- 第二个盒子 -->
            <div class="h2_text_2"><h2>Frequently Asked Questions</h2></div>
            <aside class="down_right_aside2">
                <section>
                    <div>
                        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                    </div>
                    <div>
                        <p>Sed do elusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quls nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duls aute
                            irure dolor in reprehenderit in voluptate velit esse illum dolore.</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h4>Excepteur sint occaecat cupidatat non proident, sunt officia deserunt</h4>
                    </div>
                    <div>
                        <p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab ilo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo.</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut</h4>
                    </div>
                    <div>
                        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                            sed quia non numquam eius modi tempora incidunt.</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h4>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</h4>
                    </div>
                    <div>
                        <p>Suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel ilum qui
                            dolorem eum fugiat quo voluptas nulla pariatur.</p>
                    </div>
                </section>
            </aside>
            <!-- 第三个盒子 -->
            <div class="h2_text_3"><h2>Contacts</h2></div>
            <aside class="down_right_aside3">
                <div class="div222">
                    <article class="aside3_article_left">
                        <ul>
                            <li>
                                <div>
                                    <span>Your Name：</span>
                                </div>
                                <div><span>Your E-mail：</span></div>
                                <div><span>Your City：</span></div>
                                <div><span>Your Massage：</span></div>
                            </li>
                            <li>
                                <input type="text" class="aside3_input1">
                                <input type="text" class="aside3_input2">
                                <input type="text" class="aside3_input3">
                                <input type="text" class="aside3_input4">
                            </li>
                        </ul>
                        <div >
                            <span>CLEAR</span> 
                            <span>SEND</span> 
                        </div>
                    </article>
                </div>
                <div class="div222">
                    <article class="aside3_article_right">
                        <aside class="asid3_right1">
                            <div>
                                <span>Country:</span>
                                <span>State:</span>
                                <span>City:</span>
                                <span>Email:</span>
                            </div>
                            <div>
                                <span>USA</span><br>
                                <span>California</span>
                                <span>San Diego</span>
                                <span>lilly@mail.com</span>
                            </div>
                        </aside>
                        <aside class="asid3_right2">
                            <h5>Miscellaneous Info:</h5>
                            <p>At vero eos et accusoaus et iustoodio dignissimos ducimusqui blanditis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                        </aside>
                    </article>
                </div>
            </aside>
        </section>
    </article>
    <!-- 最后脚注  -->
    <article class="over1">
            <aside class="min_aside">
                <div>
                    <img src="./images/footer_logo.jpg" alt="">
                </div>
                <div>
                    <span><a href="">Website template</a> designed by TemplateMonster.com</span>
                </div>
            </aside>
    </article>
      
</article>
</body>
</html>